<!-- 登录页面 -->
<template>
  <div class="content">
    <header class="titleInfo">
      <div class="headerLeft">
        <img src="../../../public/logo.png" alt="logo" class="sdLogo">
        <div class="titleName">用户中心用户身份认证v1.0.1</div>
      </div>
      <div class="operation">
        <a class="operaInfo">设为首页</a>
        |
        <a class="operaInfo">收藏</a>
      </div>
    </header>
    <main class="login-container">
      <el-form
        ref="loginForm"
        label-position="left"
        label-width="80px"
        class="loginForm"
        :model="loginForm"
        :rules="loginRule"
      >
        <div class="chooseLogin">
          <div class="chooseLoginItem">账号登录</div>
        </div>
        <el-form-item prop="code" label="用户名">
          <el-input
            id="txtCode"
            ref="username"
            v-model="loginForm.code"
            autocomplete="on"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            id="txtPassword"
            v-model="loginForm.password"
            autocomplete="on"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item prop="account" label="租户ID">
          <el-input
            id="txtTenant"
            v-model="loginForm.account"
            autocomplete="on"
            placeholder="租户id"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            id="btnLogin"
            type="primary"
            :loading="isButtonLoading"
            @click="openSlider('loginForm')"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </main>
    <footer class="webInfo">
      <div class="info-container">
        <div class="beian">博思软件(股票代码:300525)</div>
        <div class="support">CopyRight © 2021-2031 博思软件股份有限公司</div>
        <div class="suggest">浏览器： chrome90 IE10 以上 | 分辨率建议1024*1960</div>
      </div>
      <div class="QRcode">
        <img src="../../../public/QRcode.png" alt="二维码" class="code">
        <div class="support2">博思软件股份有限公司</div>
      </div>
    </footer>
    <Slider v-if="showSlider" class="Slider" @closeSlider="closeSlider" @SliderSucess="goLogin" />
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import Slider from './Slider.vue'

export default {
  name: 'Login',
  components: { Slider },
  data() {
    // 用户名校验规则
    const checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
      callback()
    }
    // 密码校验规则
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      } else if (value.length < 6) {
        return callback(new Error('密码不得小于6位'))
      }
      callback()
    }
    // 租户Id校验规则
    const checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('租户Id不能为空'))
      }
      callback()
    }
    return {
      // 登录参数
      loginForm: {
        code: '',
        account: '',
        password: ''
      },
      // 校验规则
      loginRule: {
        code: [
          { validator: checkCode, trigger: 'blur' }
        ],
        account: [
          { validator: checkAccount, trigger: 'blur' }
        ],
        password: [
          { validator: checkPassword, trigger: 'blur' }
        ]
      },
      // 展示滑块
      showSlider: false,
      // 按钮是否loading
      isButtonLoading: false
    }
  },
  methods: {
    ...mapActions(
      'user', [
        'login'
      ]
    ),
    /**
     * 开启滑块
     * @param {*} formName 校验规则使用
     */
    openSlider(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.showSlider = true
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 关闭滑块
     */
    closeSlider() {
      this.showSlider = false
    },

    /**
     * 登录
     */
    async goLogin() {
      this.showSlider = false
      this.isButtonLoading = true

      // 获取输入的信息
      const { code, account, password } = this.loginForm
      try {
        // 租户Id输入错误直接报错
        if (account !== 'BOSSSOFT') {
          this.$message.error('租户输入错误')
          return
        }
        // 调用接口
        let res = await this.login({ code, account, password })
        if (res.code === 200) {
          this.$router.push({ path: '/' })
        } else {
        // 清除输入的信息
          this.loginForm = {
            code: '',
            account: '',
            password: ''
          }
          this.$message.error(res.msg)
          // 光标定位至用户名输入框
          this.$refs.username.focus()
          this.isButtonLoading = false
        }
      // 路由跳转
      } catch {
        // 清除输入的信息
        this.loginForm = {
          code: '',
          account: '',
          password: ''
        }
        this.$message.error('服务器异常,请稍后再试')
        // 光标定位至用户名输入框
        this.$refs.username.focus()
      } finally {
        this.isButtonLoading = false
      }
    }
  }
}
</script>

<style scoped>
	.titleInfo {
		width: 100vw;
		height: 8vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headerLeft {
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.sdLogo {
		height: 100%;
		margin-left: .8vw;
	}

	.titleName {
		height: 20px;
		margin-left: 15px;
		line-height: 26px;
		font-size: 26px;
		font-weight: 800;
	}
	.operation {
		margin-right: .8vw;
	}
	.login-container {
		width: 100%;
		height: 75vh;
		margin: auto;
		background-image: url('../../../public/loginBg.jpg');
    background-position: right center;
		background-size: 160vw 100vh;
		background-repeat: no-repeat;
	}

	.loginForm {
		position: absolute;
    width: 520px;
    height: 350px;
    max-width: 100%;
    padding: 20px 35px 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 1em;
    background-color: #fff;
	}
  .chooseLogin {
    color: #000;
    display: flex;
    height: 50px;
  }

	.webInfo {
    text-decoration: none;
    color: rgb(80, 182, 255);
		width: 100%;
    height: 17vh;
    background-color: #e4e7ed;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
	}
	.info-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .beian {
    color: #687f7f;
    font-size: 13px;
    width: 194px;
    margin: 10px auto 5px;
  }

  .support{
    margin: 10px auto 5px;
    color: #687f7f;
    font-size: 13px;
    width: 300px;
  }

  .suggest {
    color: red;
    margin: 10px auto 5px;
    width: 340px;
    font-size: 14px;
  }
  .QRcode {
    position: absolute;
    top: 10px;
    right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .code {
    width: 90px;
    height: 90px;
  }
  .support2 {
    margin-top: 8px;
    font-size: 13px;
  }
  #btnLogin {
    width: 100%;
    margin-left: -35px;
  }
  .Slider {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }

</style>
